<template>
  <div class="container">
    <div class="card">
      <div>
        <h1>任务中心</h1>
        <div class="div-big">
          <div class="div-small" @click="goTaskCenter()">任务老师</div>
          <div class="div-small" @click="goAssignTask()">布置任务</div>
          <div class="div-small">查找任务</div>
          <div class="div-small">创建任务</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div>
        <h1 style="border: 1px solid red">教材中心</h1>
        <div class="div-big">
          <div class="div-small">任务</div>
          <div class="div-small">布置</div>
          <div class="div-small">查找</div>
          <div class="div-small">创建</div>
        </div>
      </div>
    </div>
    <div class="card">
      <div>
        <h1>管理中心</h1>
        <div class="div-big">
          <div class="div-small" @click="goStaffMgmt()">账号管理</div>
          <div class="div-small">班级管理</div>
          <div class="div-small">员工管理</div>
          <div class="div-small">数据中心</div>
        </div>
      </div>
    </div>
    <div class="card" style="border: 0px"></div>
  </div>
</template>

<script setup>
import VanillaTilt from "vanilla-tilt";

import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
onMounted(() => {
  // vanilla-tilt.js是一个平滑的3D倾斜JS库，具体参数配置度娘可查到
  VanillaTilt.init(document.querySelectorAll(".card"), {
    max: 15, //最大倾斜度数
    speed: 400, //倾斜转换的速度
    glare: true, //是否开启眩光效果
    "max-glare": 1, //最大眩光的不透明度
  });

  VanillaTilt.init(document.querySelectorAll(".card"));
});
const goTaskCenter = () => {
  router.push({ path: "/taskCenter" });
};
const goAssignTask = () => {
  router.push({ path: "/assignTask" });
};
const goStaffMgmt = () => {
  router.push({ path: "/staffMgmt" });
};
</script>

<style  scoped>
@import url("http://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 设置字体 */
  font-family: "Poppins";
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  background-color: #161626;
  min-height: 100vh;
}

.card {
  width: 480px;
  margin: 10px;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: #01b9f5;
  /* 背景模糊 */
  backdrop-filter: blur(5px);
}

.card h1 {
  font-size: 50px;
  padding-bottom: 5px;
}

.div-big {
  display: flex;
  justify-content: space-between;
}

.div-small {
  flex: 1;
  height: 500px;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 45px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s; /* 背景颜色过渡效果 */
  /* 背景模糊 */
  backdrop-filter: blur(5px);
}

.div-small:hover {
  background-color: #0056b3; /* 悬停时的背景颜色 */
}
</style>